<template>
    <view>
        <view class="search">
            <u-search placeholder="搜索备注、昵称..." bgColor="#F8F8FA" :showAction="false" fontSize="24rpx"
                searchIconSize="20" color="#B1B1B1" placeholderColor="#B1B1B1"></u-search>
        </view>

        <UserLabel v-for="item in fansList" :item="item" radius="50" @clickUnfollow="clickFollowFans"></UserLabel>
        <UnfollowPopup :popup="state.popup" @closePopup="closePopup"></UnfollowPopup>
        <NullMsg v-if="fansList.length == 0" text="还没有人关注你呦！"></NullMsg>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import NullMsg from '../components/NullMsg/index.vue';
import UserLabel from '../components/UserLabel/index.vue';
import UnfollowPopup from '../components/UnfollowPopup/index.vue';

const fansList = ref([
    { name: '读你', signature: '雨夜无眠', handle: '回关' },
    { name: '读你', signature: '雨夜无眠', handle: '互粉' }
])

const state = ref({
    popup: false
})

const clickFollowFans = () => {
    state.value.popup = true
}
const closePopup = () => {
    state.value.popup = false
}
</script>

<style lang="scss" scoped>
.search {
    padding: 20rpx;
}
</style>